<template>
  <KView class="sys-svg" @click="handleClick">
    <img class="sys-img" :src="url" mode="aspectFit">
  </KView>
</template>

<script>
  import svgData from './svgData';

  export default {
    props: {
      name: {
        type: String,
        required: true
      },
      color: {
        type: String,
        default: '#000000'
      }
    },

    watch: {
      color(newColor) {
        this.url = svgData(this.name, newColor);
      }
    },

    data() {
      return {
        url: svgData(this.name, this.color)
      };
    },

    methods: {
      handleClick(event) {
        this.$emit('click', event);
      }
    }
  };

</script>

<style lang="scss">
  .sys-svg {
    width: 100%;
    height: 100%;
  }

</style>
